{% extends "Industrial_Logs/base.html" %} {% block header %} {% endblock header %} {% block content %}
    <script src="{{ STATIC_URL }}dist/js/monitor.js"></script>
    <script src="{{STATIC_URL}}dist/js/OtherCharts.js"></script>
    <div id="back" class="main" style="height:90%;">

        <h1 style="color:wheat;text-align: center;font-family:cursive;font-weight:700;top:-20px;position: relative;top: 40px;">
            河南城建工业大数据平台</h1>

        <div id="layer02" class="layer" style="height:15%;">
            <div id="layer02_01" style="width:20%;">
                <div class="layer02-data">
                    <span style="font-size:26px;">{{ ss }}</span>
                    <span style="font-size:16px;">台</span>
                </div>
                <canvas width="200" height="100"></canvas>
            </div>
            <div id="layer02_02" style="width:20%;">
                <div class="layer02-data">
                    <span style="font-size:26px;">{{ aa1 }}</span>
                    <span style="font-size:16px;">℃</span>
                </div>
                <canvas width="200" height="100"></canvas>
            </div>
            <div id="layer02_03" style="width:21%;">
                <div class="layer02-data">
                    <span style="font-size:26px;">{{ aa2 }}</span>
                    <span style="font-size:16px;">%rh</span>
                </div>
                <canvas width="200" height="100"></canvas>
            </div>
            <div id="layer02_04" style="width:12%;">
                <div class="layer02-data">
                    <span style="font-size:26px;">50</span>
                    <span style="font-size:16px;">PB</span>
                </div>
                <canvas width="120" height="100"></canvas>
            </div>
            <div id="layer02_05" style="width:12%;">
                <div class="layer02-data">
                    <span style="font-size:26px;">25</span>
                    <span style="font-size:16px;">个</span>
                </div>
                <canvas width="120" height="100"></canvas>
            </div>
            <div id="layer02_06" style="width:12%;">
                <div class="layer02-data">
                    <span style="font-size:26px;">5</span>
                    <span style="font-size:16px;">个</span>
                </div>
                <canvas width="120" height="100"></canvas>
            </div>
        </div>
        <div id="layer03" class="layer" style="height:40%;">
            <div id="layer03_left" style="width:48%;" class="layer03-panel">  {# 传感器类型占比饼图 #}
{#                <div id="layer03_left_label01" class="layer03-left-label">接入机型占比</div>#}
{#                <div id="layer03_left_01" class="layer03-left-chart" style="width:16%;">#}
{#                    <canvas width="100" height="200" style="margin:30px 0 0 20px;"></canvas>#}
{#                </div>#}
                <div id="sensor_proportion_1" class="layer03-left-chart" style="width:100%;"></div>

            </div>
            <div id="layer03_right" style="width:50%;" class="layer03-panel">
                <div id="layer03_right_label">存储</div>
                <div id="layer03_right_chart01" class="layer03-right-chart">
                    <canvas width="130" height="150" style="margin:40px 0 0 20px;"></canvas>
                    <div class="layer03-right-chart-label">Hdfs</div>
                </div>
                <div id="layer03_right_chart02" class="layer03-right-chart">
                    <canvas width="130" height="150" style="margin:40px 0 0 20px;"></canvas>
                    <div class="layer03-right-chart-label">Rdbms</div>
                </div>
                <div id="layer03_right_chart03" class="layer03-right-chart">
                    <canvas width="130" height="150" style="margin:40px 0 0 20px;"></canvas>
                    <div class="layer03-right-chart-label">Rdies</div>
                </div>
            </div>
        </div>
        <div id="layer04" class="layer" style="height:30%;">
            <div id="layer04_left" class="layer04-panel">
                <div id="layer04_left_label" class="layer04-panel-label">30天日均线流量趋势</div>
                <div id="layer04_left_chart" class="layer04-panel-chart"></div>
            </div>
            <div id="layer04_right" class="layer04-panel">
                <div id="layer04_right_label" class="layer04-panel-label">
                    <span>集群性能/</span><span style="color:#00A09A;">近一个小时</span>
                </div>
                <div id="layer04_right_chart" class="layer04-panel-chart"></div>
            </div>
        </div>
    </div>
    <script>
        $(function () {
            drawLayer02Label($("#layer02_01 canvas").get(0), "接入终端数量", 80, 200);
            drawLayer02Label($("#layer02_02 canvas").get(0), "当前温度数据", 80, 300);
            drawLayer02Label($("#layer02_03 canvas").get(0), "当前湿度数据", 80, 400);
            drawLayer02Label($("#layer02_04 canvas").get(0), "总存储数据", 50, 200);
            drawLayer02Label($("#layer02_05 canvas").get(0), "当前任务个数", 40, 200);
            drawLayer02Label($("#layer02_06 canvas").get(0), "当前集群数", 50, 200);

            {#renderLegend();#}

            //饼状图
            proportion({{ kind |safe}},{{ count |safe}});
            {#renderChartBar01();#}
            //renderChartBar02();

            //存储
            renderLayer03Right();

            //30天日均线流量趋势
            renderLayer04Left();

            //集群性能
            renderLayer04Right();

        })
    </script>
{% endblock content %}